<template>
  <div>
    <my-header class="header-main">
      <login-bar></login-bar>
    </my-header>
    <img
      :src="banner"
      alt="" class="imgw100"
    >
    <div class="main proback_fff">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"> <span class="color-danger">{{$t('home')||"首页"}}</span></el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/Startup/Startup' }">{{$t('label412')||"Startup"}}</el-breadcrumb-item>
        <!-- <el-breadcrumb-item>{{$t(breadNavItem.i18nKey)||breadNavItem.label}}</el-breadcrumb-item> -->
      </el-breadcrumb>
      <el-container>
        <div class="con_main">
					<div class="top_imgbox flex">
            <div class="left_img">
                <!-- <img src="../../assets/images/shangbi/GoWithMicn.png" alt="" srcset="" class="left_img"> -->
                <img :src="ProaiAllData.banner" alt="" srcset="" class="left_img">
            </div>
            <div class="img_right position_box">
									<h2 class="font-24">【{{ProaiAllData.coin}}】{{ProaiAllData.name}}</h2>
									<p>已筹款：<span class="font-24 cor_danger">{{Number(ProaiAllData.getnumber)}}</span> <span>USDT</span></p>
									<p>目标：<span class="font-16">{{Number(ProaiAllData.usdtnumber)}} </span> USDT</p>
									<p>当前进度：{{((ProaiAllData.getnumber/ProaiAllData.usdtnumber)*100).toFixed(4)}}%</p>
									<el-progress :percentage="((ProaiAllData.getnumber/ProaiAllData.usdtnumber)*100).toFixed(4)"></el-progress>
									<div class="su_time">
										<p>开始认购时间 <span class="t_red">{{timestampToTime(ProaiAllData.statewritedate)}}</span></p>
										<p>结束认购时间 <span class="t_red">{{timestampToTime(ProaiAllData.endwritedate)}}</span></p>
										<p>此项目必须在 <span class="t_red font-bold">结束认购时间</span> 前得到 <span class="t_red font-bold">{{Number(ProaiAllData.usdtnumber)}} </span> USDT 的等额支持才可成功！否则将下线并退款。</p>
									</div>
									<div class="suend_time">
										<!-- <p>距离 开始 还剩:</p>
										<p>00周02日18时53分50秒</p> -->
                    <el-button type="warning" size="small" v-if="ProaiAllData.state==0"> 
                      <div class="flex">
                        <span>距离开始：</span>
                        <count-down v-on:start_callback="countDownS_cb(1)" v-on:end_callback="countDownE_cb(1)" :currentTime="ProaiAllData.nowwritedate" :startTime="ProaiAllData.statewritedate" :endTime="ProaiAllData.endwritedate" :tipText="'距开始'" :tipTextEnd="'距离结束'" :endText="'结束啦~'" :dayTxt="'天'" :hourTxt="'小时'" :minutesTxt="'分钟'" :secondsTxt="'秒'"></count-down>
                      </div>
                    </el-button>
                    <el-button type="warning" size="small" v-if="ProaiAllData.state!=0">
                        <span v-if="ProaiAllData.state==1">正在进行中</span>
                        <span v-if="ProaiAllData.state==2||ProaiAllData.state==3">已完成</span>
                    </el-button>
										<!-- <p class="m-top-10">支持人数： {{ProaiAllData.people}}</p> -->
									</div>
                  <!-- 定位样式 -->
                  <div class="pro_righttop font-20">
                    <p v-if="ProaiAllData.state==0">即将开始</p>
                    <p v-if="ProaiAllData.state==1">进行中</p>
                    <p v-if="ProaiAllData.state==2||ProaiAllData.state==3">已完成</p>
                  </div>	
							</div>
					</div>
          <!-- 02 -->
          <div class="container_box flex">
            <div  class="v_left">
              <!-- 视频介绍 -->
              <!-- <div v-on:click="playVideo()">
                <video :src="videoSrc" id="videoPlay"  class="video video_width" controls="controls" muted>您的浏览器不支持 video 视屏播放。</video> 
              </div> -->
              <!--项目介绍  -->
              <div class="v_leftinfo">
                <h2 class="font-24 font-bold">【{{ProaiAllData.coin}}】{{ProaiAllData.name}}</h2>
                <p> <span v-html="ProaiAllData.info"></span></p>
              </div>
              <div class="project_info">
                <h2 class="font-24 font-bold">项目介绍</h2>
                <div class="v_protable">
                  <template>
                  <el-table
                    :data="tableData"
                    border
                    style="width: 100%" class="m-top-10">
                    <el-table-column
                      prop="date"
                      label="基本信息"
                      min-width="50%">
                    </el-table-column>
                    <el-table-column
                      prop="link"
                      label="信息链接"
                      min-width="50%">
                       <template slot-scope="scope">
                          <p v-if="scope.row.link!='*'" class="cor_eff">
                              <span>{{ scope.row.link }}</span>
                          </p>
                          <p v-else-if="scope.row.link=='*'" class="cor_eff">
                              <span>暂无</span>
                          </p>
                        </template>
                    </el-table-column>
                  </el-table>
                </template>
                </div>
              </div>
              <div class="pdf_link">
                <h2>
                  <a :href="ProaiAllData.pdf" class="a_linkcolor font-18">PDF原文</a>
                </h2>
              </div>
              <div class="pdf_img">
                <img :src="ProaiAllData.pdfimg" alt="" srcset="">
              </div>
            </div>
            <!-- 右侧信息 -->
            <div class="v_right">
							<div class="v_rone m-bottom-10">
                
              </div>
              <!-- v-two -->
              <div class="v_rone m-bottom-10">
                
              </div>
              <!-- v-3 -->
              <div class="v_rone m-bottom-10">
                
                
              </div>
              <!-- v-4 -->
              <div class="v_rone m-bottom-10">
                
              </div>
              <!-- v-5 -->
              <div class="v_rone m-bottom-10">
                
              </div>
						</div>
					</div>
				</div>
      </el-container>
    </div>
    <my-footer></my-footer>
    <!-- 锁仓弹窗 -->
    <el-dialog title="支持项目" :visible.sync="prorpForm" width="30%" >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :label-position="labelPosition">
        <el-form-item label="数量" prop="number">
          <el-input v-model="ruleForm.number" clearable>
            <template slot="append">{{ruleForm.coin}}</template>
          </el-input>
        </el-form-item>
        <el-form-item label="资金密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="prorpForm = false">取 消</el-button>
        <el-button type="primary" @click="addlockBtn()" :loading="btnloading">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import questionModel from "@/model/questionModel";
import CountDown from 'vue2-countdown'
import timeFormat from "@/model/timeFormat";
import BackToTop from '@/components/Backtop/BackToTop'

let { faqList } = questionModel;
export default {
  data() {
    return {
      banner: require("@/assets/images/help/bangzhu_banner.png"),
      qList: null,
      qItem: null,
      qid: null,
      breadNavItem: {},
      videoSrc:"https://gateimg.opencoding.com/startup/GoWithMi_video_cn.mp4",//获取视频播放资源
      tableData: [{
          date: '官网',
          link: '',
        }, {
          date: '白皮书',
          link: '',
        }, {
          date: 'Twitter',
          link: '',
        },{
          date: 'Facebook',
          link: '',
        },
        {
          date: 'Telegram',
          link: '',
        },],
      ProaiAllData:{},  
      userData: this.userModel,
      coListAllData:[],
      labelPosition:'top',
      prorpForm:false,
      ruleForm:{
        number:'',
        id:"",
        password:"",
        coin:'',
      },
      btnloading:false,
    };
  },
  components: {
    CountDown,
  },
  filters: {
    formatDate: (time) => {
      let date = new Date(time);
      return timeFormat.formatDate(date, 'yyyy-MM-dd HH:mm:ss');
    },
  },
  mounted() {
    let params = this.getParams();
    if (params) {
      this.breadNavItem = params;
      this.qid = params.qid; 
    }
    console.log(this.qid); 
    this.geticoproject();
    this.geticoprojectcoin();
  },
  methods: {
    playVideo(){
        // var vdo = document.getElementById("videoPlay");
        // vdo.play();
        var vdo = document.querySelector('video').play();
        if (vdo !== undefined) {
            vdo.then(_ => {
            // Autoplay started!
        }).catch(error => {
            // Autoplay was prevented.
            // Show a "Play" button so that user can start playback.
          });
        }
    },
    getParams() {
      return Object.assign({}, this.$route.query);
    },
    // 查看ICO项目详情
    geticoproject(){
      this.request(this.api.geticoproject,{id:this.qid}).then(res => {
        if (res.code == "0" &&res.data[0]) {
          this.ProaiAllData = res.data[0] || "";
          this.tableData[0].link=this.ProaiAllData.web;
          this.tableData[1].link=this.ProaiAllData.whitebook;
          this.tableData[2].link=this.ProaiAllData.teitter;
          this.tableData[3].link=this.ProaiAllData.facebook;
          this.tableData[4].link=this.ProaiAllData.reddit;
        } else {
          // this.errMsg(res.msg || "操作失败");
          return
        }
      });
    },
    // 查看ICO项目支持币种列表
    geticoprojectcoin(){
      this.request(this.api.geticoprojectcoin,{id:this.qid}).then(res => {
        if (res.code == "0") {
          this.coListAllData = res.data || "";
        } else {
          this.errMsg(res.msg || "操作失败");
        }
      });
    },
    // 倒计时组件
    countDownS_cb: function (x) {
      console.log(x)
    },
    countDownE_cb: function (x) {
      console.log(x)
    },
    timestampToTime(timestamp) {
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
    },
    //购买
    showDioag(item){
      if (!this.userData.isLogin) {
        this.errMsg("label120" || "请登录后操作");
        return
      }else{
        this.prorpForm=true;
        this.btnloading=false;
        console.log(item);
        
        this.ruleForm.coin=item.maincoin;
        this.ruleForm.id=this.qid;
      }
    },
    addlockBtn(){
      if (this.ruleForm.id=='') {
        this.errMsg("label228");
        return false;
      }
      if (isNaN(this.ruleForm.number)||this.ruleForm.number=='') {
        this.errMsg("label208");
        return false;
      }
      if (this.ruleForm.password=='') {
        this.errMsg("fundPwdPlaceholder");
        return false;
      }
      this.btnloading=true;
      this.request(this.api.addico,this.ruleForm).then(res => {
        if (res.code == "0") {
          this.successMsg(res.msg || "操作成功");
          this.ruleForm.number==''
          // this.lockInfo = res.data.result || "";
          // this.infocoin=res.data.result[0].coin ||'';
          this.prorpForm=false;
          this.btnloading=false;
        } else {
          this.ruleForm.number=''
          this.errMsg(res.msg || "操作失败");
          this.prorpForm=false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  width: 1220px;
  margin: 30px auto 0 auto;
  .el-container {
    margin-top: 27px;
  }
  .el-aside {
    border-right: none;
    padding: 0;
  }
  .list {
    li {
      @include textVcenter;
      padding-left: 10px;
      &:hover,
      &.active {
        background: $color-danger;
        color: #fff;
      }
    }
  }
  .el-main {
    h1 {
      margin-bottom: 25px;
    }
    padding: 0 0 0 40px;
    p {
      line-height: 1.8;
    }
  }
  .warn {
    margin-top: 25px;
    color: $color-danger;
  }
}
.con_main{width: 100%;}
.su_time{
		font-size: 12px;
    color: #666;
    line-height: 1.8;
    background: #f1f2f3;
    padding: 8px;
    margin: 10px 0;
}
.left_img{width: 100%;max-width: 730px;max-height: 340px;}
.img_right{
  margin-left: 40px;
  width: 600px;
  p{line-height: 26px;}
}
.imgw100{width: 100%;}
// video
.container_box{
  margin-top: 30px;
  .v_left{width: 800px;}
  .v_right{width: 480px;margin-left: 20px;}
}
.video_width{width: 800px;height: 450px;}
.v_oneinfo{
  .one_img{width: 80px;height: 80px;}
  img{width: 80px;height: 80px;border-radius: 50%;}
  .v_onetxt{margin-left: 10px;}
  .v_line{line-height: 24px;}
}
.t_red{color: $txt-red;}
.danger_tips{
  p{line-height: 30px;}
}  
.v_tworight{
  p{font-weight: 600;line-height: 30px;}
}
.v_righthree{
  p{line-height: 24px;}
}
.v_threetop{
  p{font-weight: 600;color: #333333;}
}
// 左侧的内容区块
.v_leftinfo{
  h2{margin: 30px 0;}
  p{line-height: 24px;}
}
.project_info{
  h2{padding: 30px 0;border-bottom: 1px solid #eeeeee;}
}
.a_linkcolor{color: $color-primary}
.pdf_link{
  h2{margin: 30px 0;}
  }
.pdf_img{
  img{width: 100%;box-shadow:5px 5px 10px 2px #888888;max-width: 750px;}
} 
.position_box{position: relative;} 
.pro_righttop{
  position: absolute;top: 10px;right: 20px;padding:5px 10px;border: 4px solid #00ad82;transform:rotate(45deg);
  p{padding: 5px;background:#00ad82;color: #ffffff;}
  }
  //红色文字
.cor_danger{color: $txt-red}
.proback_fff{background: #ffffff;padding: 12px;}
.cor_eff{
  span{
    margin-left: 10px;color:#409EFF
  }
}
</style>


